<template>
  <div>
    <el-dialog title="审核" width="30%" v-model="auditVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" @closed="clear">
      <el-form label-width="100px" ref="undoneFormRef" label-position="right" :model="undoneForm">
        <el-form-item label="审核" prop="audit">
          <el-radio-group v-model="undoneForm.audit">
            <el-radio label="2">同意</el-radio>
            <el-radio label="3">不同意</el-radio>
            <el-radio label="4">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下一审核人" prop="nextAssigneeName">
          <el-input ref="assigneeInput" v-model="undoneForm.nextAssigneeName" readonly>
            <template #append>
              <el-button icon="el-icon-search" @click="toAssignee(true)"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="意见" prop="opinion">
          <el-input type="textarea" resize="none" v-model="undoneForm.opinion" />
        </el-form-item>
        <el-form-item label="抄送" prop="ccName">
          <el-input ref="assigneeInput" v-model="undoneForm.ccName" readonly>
            <template #append>
              <el-button icon="el-icon-search" @click="toAssignee(false)"></el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="close">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核人 -->
    <assignee-component ref="assgineeRef" :title="isAssignee ? '审核人' : '抄送人'" :multiple="true"
      @apply="changeAssignee" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import AssigneeComponent from './AssigneeComponent.vue'
import { completeTask } from 'src/api/flow/activiti'
import { $confirmMsg } from 'src/hooks/useCommon'

const auditVisible = ref<boolean>(false)
const undoneFormRef = ref()
const undoneForm = reactive({
  businessKey: '',
  processInsId: '',
  taskId: '',
  audit: '2',
  opinion: '',
  nextAssignees: [] as Array<string>,
  nextAssigneeName: '',
  ccList: [] as Array<string>,
  ccName: ''
})

const open = (row: any) => {
  Object.assign(undoneForm, row)
  auditVisible.value = true
}
const close = () => {
  auditVisible.value = false
}
const clear = () => {
  undoneFormRef.value.resetFields()
}
defineExpose({
  open
})

// 提交审核
const emits = defineEmits(['apply'])
const submit = () => {
  $confirmMsg('确认提交审核吗？', () => {
    completeTask(undoneForm).then(data => {
      emits('apply')
      close()
    })
  })
}

// 审核/抄送人
const assgineeRef = ref()
const isAssignee = ref<boolean>(true)

const toAssignee = (value: boolean) => {
  isAssignee.value = value
  assgineeRef.value.open()
}
const changeAssignee = (rows: Array<any>) => {
  const nextAssignees: Array<string> = []
  const nextAssigneeNames: Array<string> = []
  for (const row of rows) {
    nextAssignees.push(row.loginName)
    nextAssigneeNames.push(row.name)
  }
  if (isAssignee.value) {
    undoneForm.nextAssignees = nextAssignees
    undoneForm.nextAssigneeName = nextAssigneeNames.join()
  } else {
    undoneForm.ccList = nextAssignees
    undoneForm.ccName = nextAssigneeNames.join()
  }
}
</script>
